<!-- eslint-disable no-unused-vars -->
<!-- eslint-disable vue/no-unused-vars -->
<template>
    <!-- 这是公共组件轮播图 -->
   <div class="swiper-container" ref="mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(carousel, index) in list" :key="carousel.id">
                            <img :src="carousel.imgUrl" />

                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import Swiper from 'swiper'
export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'carousel',
    props:['list'],
    watch: {
        
        //最完善的方式:利用watch $nexTick一起解决swiper问题
        //监听轮播图数据 对象写法
        bannerList: { //不要写错单词...
            // eslint-disable-next-line no-unused-vars
          immediate:true,
            // eslint-disable-next-line no-unused-vars
            handler(newValue, oldValue) {
                //handler执行了只能保证bannerList更新了,但v-for是否执行完毕是无法确定的,页面没有变化的
                //$nextTick 在下次DOM更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新的dom
                this.$nextTick(() => {
                         // eslint-disable-next-line no-unused-vars
                         let mySwiper = new Swiper(this.$refs.mySwiper, {
                            autoplay: {
                                delay: 500,
                                stopOnLastSlide: false,
                                disableOnInteraction: true,
                            },
                            loop: true, // 循环模式选项
                            // 如果需要分页器
                            pagination: {
                                el: '.swiper-pagination',
                                //小圆点切换
                                clickable: true,
                            },

                            // 如果需要前进后退按钮
                            navigation: {
                                nextEl: '.swiper-button-next',
                                prevEl: '.swiper-button-prev',
                            },

                            // 如果需要滚动条
                            // scrollbar: {
                            //     el: '.swiper-scrollbar',
                            // },
                        })
                  

                })

            }
        }
    }
}

</script>

<style lang='scss' scoped>

</style>
